<template>
    <a-card>
        <div ref="d3CanvasRef" :style="{ height: canvasHeight + 'px', width: '100%' }">
            <svg ref="d3CanvasSvgRef" class="d3CanvasSvg"></svg>
        </div>
    </a-card>
</template>
<script setup>
import * as d3 from "d3";
import html2canvas from 'html2canvas';
import { initChart } from "@/api/canvas.ts";
const d3CanvasRef = ref(null)
const d3CanvasSvgRef = ref(null)
const canvasHeight = ref(300)
const $ = ref(undefined)
const props = defineProps({
    data: {
        type: Object,
    }
})
function draw(){
    //每个矩形的宽度
    const width = 80
    //每个矩形的高度
    const height = 50
    //箭头竖线条长度
    const lineLength = 30
    //箭头直条长度（横线）
    const line = 20
    //箭头直条斜度
    const angle = 10
    //打捞工具透明度
    const opacity = 0.5
    //绘制图像的x,y轴位置
    const y = 75
    const x = 5
    const containerWidth = d3CanvasRef.value.offsetWidth;
    $.value = initChart(d3.selectAll(".d3CanvasSvg"), containerWidth, canvasHeight.value);
    //上接头图
     $.value.append("rect")
        .attr("x", x)// 矩形左上角的 x 坐标
        .attr("y", y)  // 矩形左上角的 y 坐标
        .attr("width", width)  // 矩形的宽度
        .attr("height", height)  // 矩形的高度
        .attr("fill", "blue") // 填充颜色
        .attr("opacity", opacity)// 43,147,123
        .style('stroke', 'black') // 设置描边颜色  
        .style('stroke-width', '2px'); // 设置描边宽度 
    //上接头文字标注
    $.value.append("line")
        .attr("x1", x+angle)
        .attr("y1", y+height+lineLength*5)
        .attr("x2", x)
        .attr("y2", y+height)
        .attr("stroke", "black");
    $.value.append("line")
        .attr("x1", x+line)
        .attr("y1", y+height+lineLength*5)
        .attr("x2", x+angle)
        .attr("y2", y+height+lineLength*5)
        .attr("stroke", "black");
    $.value.append('text')
        .attr('x', x+line)
        .attr('y',y+height+lineLength*5)
        .attr('font-size', '15')
        .text(`上接头`+`（Ø157*295）`);
    //加长筒
    $.value.append("rect")
        .attr("x", x+width)// 矩形左上角的 x 坐标
        .attr("y", y)  // 矩形左上角的 y 坐标
        .attr("width", width)  // 矩形的宽度
        .attr("height", height)  // 矩形的高度
        .attr("fill", "blue") // 填充颜色
        .style('stroke', 'black') // 设置描边颜色  
        .style('stroke-width', '2px') // 设置描边宽度  
        .attr("opacity", opacity); // 43,147,123
    //加长筒文字标注
    $.value.append("line")
        .attr("x1", x+width+angle)
        .attr("y1", y+height+lineLength*4)
        .attr("x2", x+width)
        .attr("y2", y+height)
        .attr("stroke", "black");
    $.value.append("line")
        .attr("x1", x+width+line)
        .attr("y1", y+height+lineLength*4)
        .attr("x2", x+width+angle)
        .attr("y2", y+height+lineLength*4)
        .attr("stroke", "black");
    $.value.append('text')
        .attr('x', x+width+line)
        .attr('y',y+height+lineLength*4)
        .attr('font-size', '15')
        .text(`加长筒`+`（Ø157*770）`);

    //打捞主体
    $.value.append("rect")
        .attr("x", x+width*2)// 矩形左上角的 x 坐标
        .attr("y", y)  // 矩形左上角的 y 坐标
        .attr("width", width)  // 矩形的宽度
        .attr("height", height)  // 矩形的高度
        .attr("fill", "red") // 填充颜色
        .style('stroke', 'black') // 设置描边颜色  
        .style('stroke-width', '2px') // 设置描边宽度  
        .attr("opacity", opacity); // 43,147,123
    //打捞主体文字标注
    $.value.append("line")
        .attr("x1", x+width*2+angle)
        .attr("y1", y+height+lineLength*3)
        .attr("x2", x+width*2)
        .attr("y2", y+height)
        .attr("stroke", "black");
    $.value.append("line")
        .attr("x1", x+width*2+line)
        .attr("y1", y+height+lineLength*3)
        .attr("x2", x+width*2+angle)
        .attr("y2", y+height+lineLength*3)
        .attr("stroke", "black");
    $.value.append('text')
        .attr('x', x+width*2+line)
        .attr('y',y+height+lineLength*3)
        .attr('font-size', '15')
        .text(`打捞主体`+`（Ø157*525）`);
 
    //卡瓦
    $.value.append("rect")
        .attr("x", x+width*2)// 矩形左上角的 x 坐标
        .attr("y", y+3)  // 矩形左上角的 y 坐标
        .attr("width", width-30)  // 矩形的宽度
        .attr("height", height-6)  // 矩形的高度
        .attr("fill", "#BEBEBE") // 填充颜色
        .style('stroke', 'black') // 设置描边颜色  
        .style('stroke-width', '1px') // 设置描边宽度  
    //卡瓦文字标注
    $.value.append("line")
        .attr("x1", x+width*2.2+angle)
        .attr("y1", y-lineLength*2)
        .attr("x2", x+width*2.2)
        .attr("y2", y+3)
        .attr("stroke", "black");
    $.value.append("line")
        .attr("x1", x+width*2.2+line)
        .attr("y1", y-lineLength*2)
        .attr("x2", x+width*2.2+angle)
        .attr("y2", y-lineLength*2)
        .attr("stroke", "black");
    $.value.append('text')
        .attr('x', x+width*2.2+line)
        .attr('y',y-lineLength*2)
        .attr('font-size', '15')
        .text(`卡瓦`+`（Ø124*170）`);
    //定位圈
    $.value.append("rect")
        .attr("x", x+width*3-30)// 矩形左上角的 x 坐标
        .attr("y", y+3)  // 矩形左上角的 y 坐标
        .attr("width", width-60)  // 矩形的宽度
        .attr("height", height-6)  // 矩形的高度
        .attr("fill", "#DCDCDC") // 填充颜色
        .style('stroke', 'black') // 设置描边颜色  
        .style('stroke-width', '1px') // 设置描边宽度  
    //定位圈文字标注
    $.value.append("line")
        .attr("x1", x+width*2.7+angle)
        .attr("y1", y-lineLength)
        .attr("x2", x+width*2.7)
        .attr("y2", y+3)
        .attr("stroke", "black");
    $.value.append("line")
        .attr("x1", x+width*2.7+line)
        .attr("y1", y-lineLength)
        .attr("x2", x+width*2.7+angle)
        .attr("y2", y-lineLength)
        .attr("stroke", "black");
    $.value.append('text')
        .attr('x',x+width*2.7+line)
        .attr('y',y-lineLength)
        .attr('font-size', '15')
        .text(`定位圈 `+` （外径130mm，内径100mm）`);
    //引鞋
    $.value.append("rect")
        .attr("x", x+width*3)// 矩形左上角的 x 坐标
        .attr("y", y-5)  // 矩形左上角的 y 坐标
        .attr("width", width)  // 矩形的宽度
        .attr("height", height+10)  // 矩形的高度
        .attr("fill", "blue") // 填充颜色
        .style('stroke', 'black') // 设置描边颜色  
        .style('stroke-width', '2px') // 设置描边宽度  
        .attr("opacity", opacity); // 43,147,123
    //引鞋文字标注
    $.value.append("line")
        .attr("x1", x+width*3+angle)
        .attr("y1", y+height+lineLength*2)
        .attr("x2", x+width*3)
        .attr("y2", y+height)
        .attr("stroke", "black");
    $.value.append("line")
        .attr("x1", x+width*3+line)
        .attr("y1", y+height+lineLength*2)
        .attr("x2", x+width*3+angle)
        .attr("y2", y+height+lineLength*2)
        .attr("stroke", "black");
    $.value.append('text')
        .attr('x', x+width*3+line)
        .attr('y',y+height+lineLength*2)
        .attr('font-size', '15')
        .text(`引鞋 `+` 内径（110mm）`);
    //仪器
    $.value.append("rect")
        .attr("x", x+width-20)// 矩形左上角的 x 坐标
        .attr("y", y+6)  // 矩形左上角的 y 坐标
        .attr("width", 470)  // 矩形的宽度
        .attr("height", height-13)  // 矩形的高度
        .attr("fill", "#DCDCDC") // 填充颜色
        .style('stroke', 'black') // 设置描边颜色  
        .style('stroke-width', '1px') // 设置描边宽度  
        .attr("opacity", 0.8); // 43,147,123
    //仪器文字标注
    $.value.append("line")
        .attr("x1", x+width*4.5+angle)
        .attr("y1", y+height+lineLength)
        .attr("x2", x+width*4.5)
        .attr("y2", y+height-6)
        .attr("stroke", "black");
    $.value.append("line")
        .attr("x1", x+width*4.5+line)
        .attr("y1", y+height+lineLength)
        .attr("x2", x+width*4.5+angle)
        .attr("y2", y+height+lineLength)
        .attr("stroke", "black");
    $.value.append('text')
        .attr('x', x+width*4.5+line)
        .attr('y',y+height+lineLength)
        .attr('font-size', '15')
        .text(`落物`+`（Ø157*295）`);
}

onMounted(() => {
     draw()
})
</script>